<script setup >
import { ref, reactive, watch } from "vue";
import { NCard, NPagination, NSpin, NButton, useMessage } from "naive-ui";
import { findHistory, deleteHistory } from "@/api/user";

const reqParams = reactive({
  page: 1,
  pageSize: 10,
});

const message = useMessage();
const historyData = ref(null);
const findh = () => {
  findHistory(reqParams).then((res) => {
    historyData.value = res;
  });
};

watch(
  reqParams,
  () => {
    findh();
  },
  {
    immediate: true,
  }
);

const delHistory = (id) => {
  deleteHistory({ ids: [id] }).then(() => {
    const index = historyData.value.items.findIndex((val) => val.spu.id === id);
    historyData.value.items.splice(index, 1);
    message.success("删除成功");
  });
};
</script>

<template>
  <div class="history">
    <h3 style="margin-bottom: 20px">我的足迹 :</h3>
    <n-spin :show="!historyData">
      <div v-if="historyData">
        <n-card v-for="item in historyData.items" :key="item.id">
          <div class="historyCard">
            <img :src="item.spu.picture" alt="" />
            <div class="desc">
              <p>{{ item.spu.name }}</p>
              <p>{{ item.spu.desc }}</p>
              <p class="price">${{ item.spu.price }}</p>
            </div>
            <div class="action">
              <n-button
                type="error"
                size="small"
                @click="delHistory(item.spu.id)"
                >删除</n-button
              >
            </div>
          </div>
        </n-card>
        <div class="page">
          <n-pagination
            v-model:page="reqParams.page"
            :page-count="historyData.pages"
            show-quick-jumper
          />
        </div>
      </div>
    </n-spin>
  </div>
</template>

<style scoped lang='less'>
.history {
  background: #fff;
  height: 100%;
  padding: 20px;
  .n-card {
    margin-bottom: 20px;
  }
  .historyCard {
    overflow: hidden;
    display: flex;
    justify-content: start;
    align-items: center;
    img {
      height: 100px;
      width: 100px;
      object-fit: cover;
      margin-right: 20px;
    }
    .desc {
      flex: 2;
      p {
        height: 35px;
        line-height: 35px;
      }
    }
    .price {
      color: @priceColor;
    }
  }
  .action {
  }

  .page {
    display: flex;
    justify-content: center;
    align-content: center;
  }
}
</style>